<template>
  <div class="box">
    <div class="box_t" v-html="details.introduction">
    </div>
    <div class="box_b">
      <div class="box_b_t">
        <small></small>楼栋党小组
      </div>
      <div class="box_b_b">
        <ul class="box_b_b_itemUl">
          <li class="box_b_b_item" @click="itemClick(e)" v-for="(e,i) in lists" :key="i">
            <img src="/static/img/wangge/一号楼@2x.png" alt="">
            <div class="overflowEllipsis">{{e.name}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import taskApi from "../../requestApi/taskApi";
  import {
    Toast
  } from "mint-ui";
  export default {
    components: {},
    data() {
      return {
        details: {},
        lists: []
      };
    },
    created: function () {},
    mounted() {
      let self = this;
      self.baseUserMessageDistributeFun();
      window.getAppgetUserToken = function (val) {
        self.baseUserInfoFun(val);
        self.listFun();
        self.listLddFun();
      };
      this.titleFun({
        title: "详情"
      });
    },
    methods: {
      itemClick(e) {
        this.basePushFun(`/loudongdangInfo?id=${e.id}`);
      },
      async listFun() {
        let self = this;
        if (this.$route.query.id) {
          let params = {
            id: this.$route.query.id
          };
          let res = await taskApi.GetApiorgorginfo(params);
          if (res.statusCode == 200) {
            self.details = {
              ...res.data
            };
          } else {
            Toast({
              message: res.statusMessage,
              position: "bottom"
            });
          }
        }
      },
      async listLddFun() {
        let self = this;
        if (this.$route.query.id) {
          let params = {
            id: this.$route.query.id,
            types: "6"
          };
          let res = await taskApi.GetApiorgorgchildtypelist(params);
          if (res.statusCode == 200) {
            self.lists = res.data;
          } else {
            Toast({
              message: res.statusMessage,
              position: "bottom"
            });
          }
        }
      }
    },
    filters: {},
    watch: {},
    computed: {}
  };

</script>
<style scoped>
  .box_b_b {
    width: calc(100% - 0.9867rem - 1.1733rem);
    margin-left: 0.9867rem;
    overflow: hidden;
  }

  .box_b_b_item div {
    width: 1.3333rem;
    height: 0.4267rem;
    line-height: 0.4267rem;
    margin-top: 0.1333rem;
    font-size: 0.3467rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(69, 69, 69, 1);
    text-align: center;
  }

  .box_b_b_item img {
    width: 1.3333rem;
    height: 1.3333rem;
  }

  .box_b_b_item:nth-child(4n + 0) {
    margin-right: 0 !important;
  }

  .box_b_b_item {
    height: 2rem;
    width: 1.3333rem;
    margin-right: 0.6667rem;
    margin-bottom: 0.8rem;
    overflow: hidden;
  }

  .box_b_t small {
    width: 0.1067rem;
    height: 0.5333rem;
    background: rgba(227, 45, 52, 1);
    border-radius: 0.0267rem;
    margin-left: 0.5333rem;
    margin-right: 0.1333rem;
  }

  .box_b_b_itemUl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .box_b_t {
    display: flex;
    height: 1.6rem;
    align-items: center;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(69, 69, 69, 1);
  }

  .box_t {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    overflow: hidden;
    padding-left: 0.5867rem;
    padding-right: 0.5867rem;
    padding-top: 0.48rem;
    padding-bottom: 0.8533rem;
    border-bottom: 0.0267rem solid rgba(222, 222, 222, 0.6);
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(86, 85, 85, 1);
    line-height: 0.6933rem;
  }

  .box_b {
    min-height: 1.6rem;
    width: 100%;
    background-color: #fff;
  }

  .box {
    background: #f5f9fb;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }

</style>
